

    <div class="container-fluid">
        <div class="row body_content">
            <div id='jobstatus_content'></div>
        </div>
    </div>


    <script type="text/javascript">

    function status_append_item (body, label, id, value) {
        var key_ele = document.createElement ("div"),
            value_ele = document.createElement ("div");
        key_ele.setAttribute ("class", "col-lg-4");
        key_ele.innerHTML = "<label class=\"pull-right jobstatus\" data-i18n=\"jobstatus." + label + "\"></label>";
        value_ele.setAttribute ("class", "col-lg-7");
        value_ele.innerHTML = '<p id="jobstat_' + id + '">' + value + "</p>";
        body.appendChild (key_ele);
        body.appendChild (value_ele);
    }

    function status (name) {
        var name = location.href.replace (/[^\?]*\?name=(.*)/, "$1");
        $.get("/stat/gstreamill/job/" + name, function (response) {
            if (response.result === 'failure') {
                bootbox.alert ($.t ("jobstatus.Get Job Stat Failure"));
                return;
            }

            var status = response.data,
                job_stat_element = document.createElement ("div"),
                job_stat_header = document.createElement ("div"),
                job_stat_body = document.createElement ("div");

            job_stat_element.setAttribute ("class", "panel panel-primary");
            job_stat_element.setAttribute ("id", "jobstatus");
            job_stat_header.setAttribute ("class", "panel-heading jobstatus");
            job_stat_header.setAttribute ("data-i18n", "jobstatus.Job Status");
            job_stat_element.appendChild (job_stat_header);

            job_stat_body.setAttribute ("class", "panel-body");

            /* job status */
            status_append_item (job_stat_body, "Restart Times", "age", status.age);
            status_append_item (job_stat_body, "Last Restart Time", "laststart", status.last_start_time);
            status_append_item (job_stat_body, "Current Concurrent Count", "currentaccess", status.current_access);
            status_append_item (job_stat_body, "Average CPU Usage", "cpuaverage", status.cpu_average);
            status_append_item (job_stat_body, "Current CPU Usage", "cpucurrent", status.cpu_current);
            status_append_item (job_stat_body, "Memory Usage", "memory", status.memory);

            /* source status */
            var source_title = document.createElement ("h3"),
                source_stat = document.createElement ("div");
            source_title.innerHTML = "Source";
            source_stat.setAttribute ("class", "well row pipeline-stat");
            var streams_table = "<b class=\"jobstatus\" data-i18n=\"jobstatus.Sync Error Times\"></b>: " +
                                    '<span id="source_syncerr">' + status.source.sync_error_times + '</span>' +
                                    "; <span class=\"jobstatus\" data-i18n=\"jobstatus.Streams Count\"></span>: " +
                                    status.source.stream_count +
                                    "<table class=\"table\">" +
                                    "<tr>" +
                                    "<th class=\"jobstatus\" data-i18n=\"jobstatus.Name\"></th>" +
                                    "<th class=\"jobstatus\" data-i18n=\"jobstatus.Last Time Stamps\"></th>" +
                                    "<th class=\"jobstatus\" data-i18n=\"jobstatus.Last Heartbeat Time\"></th>" +
                                    "</tr>";
            for (var i = 0; i < status.source.streams.length; i++) {
                var stream = status.source.streams[i];
                var tr = "<tr>" +
                         "<td>" + stream.name + "</td>" +
                         '<td id="sourcetimestamp_' + stream.name + '">' + stream.timestamp + '</td>' +
                         '<td id="sourceheartbeat_' + stream.name + '">' + stream.heartbeat + "</td>" +
                         "</tr>";
                streams_table += tr;
            }
            streams_table += "</table>";
            source_stat.innerHTML = streams_table;

            job_stat_body.appendChild (source_title);
            job_stat_body.appendChild (source_stat);

            /* encoders status */
            for (var i = 0; i < status.encoders.length; i++) {
                var encoder_title = document.createElement ("h3"),
                    encoder_stat = document.createElement ("div"),
                    encoder = status.encoders[i];
                encoder_title.innerHTML = encoder.name;
                encoder_stat.setAttribute ("class", "well row pipeline-stat");
                var streams_table = "<b class=\"jobstatus\" data-i18n=\"jobstatus.Output Heartbeat\"></b>: " +
                                    '<span id="encoder' + i + '_heartbeat">' + encoder.heartbeat + '</span>' +
                                    "; <b class=\"jobstatus\" data-i18n=\"jobstatus.Total Output Bytes\"></b>: " +
                                    '<span id="encoder' + i + '_outputcount">' + encoder.count + '</span>' +
                                    "; <span class=\"jobstatus\" data-i18n=\"jobstatus.Streams Count\"></span>: " +
                                    encoder.streamcount +
                                    "<table class=\"table\">" +
                                    "<tr>" +
                                    "<th class=\"jobstatus\" data-i18n=\"jobstatus.Name\"></th>" +
                                    "<th class=\"jobstatus\" data-i18n=\"jobstatus.Last Time Stamps\"></th>" +
                                    "<th class=\"jobstatus\" data-i18n=\"jobstatus.Last Heartbeat Time\"></th>" +
                                    "</tr>";
                for (var j = 0; j < encoder.streams.length; j++) {
                    var stream = encoder.streams[j];
                    var tr = "<tr>" +
                             "<td>" + stream.name + "</td>" +
                             '<td id="encoder' + i + 'stream' + j + '_timestamp">' + stream.timestamp + '</td>' +
                             '<td id="encoder' + i + 'stream' + j + '_heartbeat">' + stream.heartbeat + '</td>' +
                             "</tr>";
                    streams_table += tr;
                }
                encoder_stat.innerHTML = streams_table;

                job_stat_body.appendChild (encoder_title);
                job_stat_body.appendChild (encoder_stat);
            }

            job_stat_element.appendChild (job_stat_body);
            $("#jobstatus_content").html (job_stat_element);
            $(".jobstatus").i18n ();
        });
    }

    $ (document).ready (function () {
        $.get("/admin/getconf", function (response) {
            if (response.result == "success") {
                Document.GstreamillConf.conf = response.data;
            } else {
                bootbox.alert ("Get Configure Failure: " + response.reason);
                return;
            }

            $.i18n.init({
                lng: Document.GstreamillConf.language[Document.GstreamillConf.conf.language]
            }, function(t) {
                $(".nav").i18n ();
                $(".jobstatus").i18n ();
            });

            status ();

            window.setInterval (function () {
                var name = location.href.replace (/[^\?]*\?name=(.*)/, "$1");
                $.get("/stat/gstreamill/job/" + name, function (response) {
                    if (response.result === 'failure') {
                        return;
                    }

                    var status = response.data;
                    $("#jobstat_age").text (status.age);
                    $("#jobstat_laststart").text (status.last_start_time);
                    $("#jobstat_currentaccess").text (status.current_access);
                    $("#jobstat_cpuaverage").text (status.cpu_average);
                    $("#jobstat_cpucurrent").text (status.cpu_current);
                    $("#jobstat_memory").text (status.memory);

                    // source
                    $("#source_syncerr").text (status.source.sync_error_times);
                    for (var i = 0; i < status.source.streams.length; i++) {
                        var stream = status.source.streams[i];
                        $("#sourcetimestamp_" + stream.name).text (stream.timestamp);
                        $("#sourceheartbeat_" + stream.name).text (stream.heartbeat);
                    }

                    // encoders
                    for (var i = 0; i < status.encoders.length; i++) {
                        var encoder = status.encoders[i];
                        $("#encoder" + i + "_heartbeat").text (encoder.heartbeat);
                        $("#encoder" + i + "_outputcount").text (encoder.count);
                        for (var j = 0; j < encoder.streams.length; j++) {
                            var stream = encoder.streams[j];
                            $("#encoder" + i + "stream" + j + "_timestamp").text (stream.timestamp);
                            $("#encoder" + i + "stream" + j + "_heartbeat").text (stream.heartbeat);
                        }
                    }
                });
            }, 5000);
        });
    });

    </script>
